<template>
	<view class="">
		<swiper  circular="true" autoplay="true" interval="5000" duration="1000" class="swiper">
			<swiper-item>
				<image mode="widthFix" src="https://emos-lei.oss-cn-beijing.aliyuncs.com/v2/img/2.png"></image>
			</swiper-item>
			<swiper-item>
				<image mode="widthFix" src="https://emos-lei.oss-cn-beijing.aliyuncs.com/v2/img/banner-1.png"></image>
			</swiper-item>
			<!-- <swiper-item>
				<image mode="widthFix" src="https://emos-lei.oss-cn-beijing.aliyuncs.com/v2/img/banner-2.png"></image>
			</swiper-item>-->
			
			<swiper-item>
				<image mode="widthFix" src="https://emos-lei.oss-cn-beijing.aliyuncs.com/v2/img/1.png"></image>
			</swiper-item>
			<!-- <swiper-item> 
				<image mode="widthFix" src="https://emos-lei.oss-cn-beijing.aliyuncs.com/v2/img/4.png"></image>
			</swiper-item> -->
		</swiper>
		
		<view class="notice m-notice-postion">
			<!-- <text class="m-notice m-center ">集材Saas</text> --> 
		</view>
		
		
		<view class="">
			<view class="m-content m-content-postion">
				<view class="m-container">
					
					
					<view class="m-flex">
						<view @tap="isActive=1" class="m-size">
							<text :class="[isActive==1?'m-font-md-active':'m-font-md']">砌块</text>
						</view>
						<view @tap="isActive=2" class="m-size" >
							<text :class="[isActive==2?'m-font-md-active':'m-font-md']" >板材</text>
						</view>
						<view @tap="isActive=3" class="m-font-md m-size">
							<text :class="[isActive==3?'m-font-md-active':'m-font-md']">辅材</text></view>
						<view @tap="isActive=4" class="m-font-md m-size">
							
							<text :class="[isActive==4?'m-font-md-active':'m-font-md']">配件</text></view>
						<view @tap="isActive=5" class="m-font-md m-size"><text :class="[isActive==5?'m-font-md-active':'m-font-md']">工具</text></view>
					</view>
					
					<view class="m-flex-2 m-content-flex">
						<view class="m-margin-bottom">
							<text @click="Test()" class="m-h2">为我推荐</text>
							<view><text class="m-p-mini">我们会根据您的要求进行匹配</text></view>
						</view>
						
						<view v-if="isActive==1" class="">
							<view class="m-margin-bottom">
								<view class="m-flex-3 m-border-bottom">
									
									<view class="content ">
										<pickerAddress @change="change" >
											<view class="" style="display: flex;justify-content: space-between;">
											<van-field
												  readonly
												  clickable
												  name="area"
												  :label="value3"
												  :placeholder="txt"
												  input-align="right"
												  class="m-h3"
												/>
											
												<view style="position: relative;top: 10rpx;"><image class="m-image" style="position: relative;top:30rpx" src="../../../../static/location.png" mode=""></image></view>
											</view>
											
											
										</pickerAddress>
									</view>
									
									
								</view>
							</view>
							<view class="m-margin-bottom">
								<view class="m-flex-3 m-border-bottom">
									<view class="uni-list-cell-db" style="width: 600rpx;">
									    <picker style="" @change="bindPickerChangeInfo" :value="InfoIndex" :range="data1">
									        <view class="" style="display: flex;justify-content: space-between;">
									        	<view class="m-h3" v-if="InfoIndex==0">
									        		砌块类型
									        	</view>
												
												<view v-else class="m-h3" >{{data1[InfoIndex]}}</view>
												<view style="position: relative;left: 28rpx;"><image class="m-image" src="../../../../static/next.png" mode=""></image></view>
									        </view>
											
											
									    </picker>
									</view>
									
									
								</view>
							</view>
							<view class="m-margin-bottom">
								<view class="m-flex-3 m-border-bottom">
									
									<view class="content-list-box" style="width: 600rpx;">
										<view class="uni-list-cell-db">
										    <picker  class="en-h3" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
										        <view class="" style="display: flex;justify-content: space-between;">
										        	<view class="m-h3">{{date}}</view>
										        	<view style="position: relative;left: 28rpx;"><image class="m-image" src="../../../../static/next.png" mode=""></image></view>
										       
												</view>
											
										    </picker>
										</view>
											
									</view>
									
								</view>
							</view>
							<uni-popup ref="popup" type="bottom">
								<view class="" style="width: 750rpx;height: 400rpx; background-image: url(https://emos-lei.oss-cn-beijing.aliyuncs.com/v2/img/bg.png);">
									<view class="i-content" style="margin-top: 46rpx;margin-bottom: 16rpx;">
										<view class="i-font-1">
											购买量
										</view>
										
										<view class="i-font-2" style="margin-bottom: 32rpx;">
											根据您的需求设置您的购买量
										</view>
										<view class="i-input" style="display: flex;">
											<view class="i-input-font" style="padding-top: 20rpx;" >
												<input class="" placeholder="请输入购买量" type="text" :value="temp"  @input="onKeyInput" />
											</view>
											<view class="i-input-font-2" style="padding-top: 20rpx;">
												m³
											</view>
										</view>
										
										<view class="" style="margin-top: 48rpx;">
											<button @tap="close(temp)" style="height: 80rpx;width: 654rpx;background-color: #1B4098;" type="default">
												<text class="p-font-1">确定</text>
												</button>
										</view>
									</view>
								</view>
							</uni-popup>
							
							<view @click="open" class="m-margin-bottom">
								<view class="m-flex-3 m-border-bottom">
							
									<view><input type="text" class="m-h3 " :value="value2" /></view>
									
									<view><image class="m-image" src="../../../../static/next.png" mode=""></image></view>
								</view>
							</view>
							
						</view>
						
						<view v-if="isActive==2" class="">
							<view class="m-margin-bottom">
								<view class="m-flex-3 m-border-bottom">
									
									<view class="content">
										<pickerAddress @change="change2" >
											<view class="" style="display: flex;justify-content: space-between;">
											<van-field
												  readonly
												  clickable
												  name="area"
												  :label="value4"
												  :placeholder="txt"
												  input-align="right"
												  class="m-h3"
												  style="border-bottom: none;border-color: red;"
												/>
											
												<view style="position: relative;top: 10rpx;"><image class="m-image" style="position: relative;top:30rpx" src="../../../../static/location.png" mode=""></image></view>
											</view>
											
											
										</pickerAddress>
									</view>
									
									
								</view>
							</view>
							<view class="m-margin-bottom">
								<view class="m-flex-3 m-border-bottom">
									<view class="uni-list-cell-db" style="width: 600rpx;">
									    <picker style="" @change="bindPickerChangeInfo2" :value="InfoIndex2" :range="data2">
									        <view class="" style="display: flex;justify-content: space-between;">
									        	<view class="m-h3" v-if="InfoIndex2==0">
									        		板材类型
									        	</view>
												<view v-else class="m-h3" >{{data2[InfoIndex2]}}</view>
												<view style="position: relative;left: 28rpx;"><image class="m-image" src="../../../../static/next.png" mode=""></image></view>
									        </view>
	
									    </picker>
									</view>
									
									
								</view>
							</view>
							<view class="m-margin-bottom">
								<view class="m-flex-3 m-border-bottom">
									
									<view class="content-list-box" style="width: 600rpx;">
										<view class="uni-list-cell-db">
										    <picker  class="en-h3" mode="date" :value="dateA" :start="startDate" :end="endDate" @change="bindDateChangeA">
										        <view class="" style="display: flex;justify-content: space-between;">
										        	
										        	<view class="m-h3">{{dateA}}</view>
										        	<view style="position: relative;left: 28rpx;"><image class="m-image" src="../../../../static/next.png" mode=""></image></view>
										       
												</view>
										
										    </picker>
										</view>
											
									</view>
									
								</view>
							</view>
							<uni-popup ref="popup" type="bottom">
								<view class="" style="width: 750rpx;height: 400rpx; background-image: url(https://emos-lei.oss-cn-beijing.aliyuncs.com/v2/img/bg.png);">
									<view class="i-content" style="margin-top: 46rpx;margin-bottom: 16rpx;">
										<view class="i-font-1">
											购买量
										</view>
										
										<view class="i-font-2" style="margin-bottom: 32rpx;">
											根据您的需求设置您的购买量
										</view>
										<view class="i-input" style="display: flex;">
											<view class="i-input-font" style="padding-top: 20rpx;" >
												<input class="" placeholder="请输入购买量" type="text" :value="temp"  @input="onKeyInputA" />
											</view>
											<view class="i-input-font-2" style="padding-top: 20rpx;">
												m³
											</view>
										</view>
										
										<view class="" style="margin-top: 48rpx;">
											<button @tap="close(temp)" style="height: 80rpx;width: 654rpx;background-color: #1B4098;" type="default">
												<text class="p-font-1">确定</text>
												</button>
										</view>
									</view>
								</view>
							</uni-popup>
							
							<view @click="open" class="m-margin-bottom">
								<view class="m-flex-3 m-border-bottom">
							
									<view ><input type="text" class="m-h3 " :value="value2A" /></view>
									
									<view><image class="m-image" src="../../../../static/next.png" mode=""></image></view>
								</view>
							</view>
						</view>
						
						
						<view class="m-margin-bottom">
							<view class="m-border-padding">
								<view class="m-flex-4">
									<view class="m-img-margin">
										<image class="m-image-1" src="../../../../static/add.png" mode=""></image>
									</view>
									<view class="">
										<text class="m-img-margin">添加更多</text>
									</view>
								</view>
								<view>
									<view class="m-flex-5">
										<view class="m-font-md-img">
											添加更多产品，享更多优惠！
										</view>
									</view>
								</view>
							</view>
						</view>
					
						<view v-if="isActive==1" class="m-margin-bottom" style="margin-top: 12rpx;">
							<view class="" @tap="toQiekuaiList2">
								<button class="m-btn-p m-font-p" >
									<text style="position: relative;top: 10rpx;">即刻搜索</text>
									</button>
							</view>
						</view>
						
						<view v-else-if="isActive==2" class="m-margin-bottom" style="margin-top: 12rpx;">
							<view class="" @tap="toBoard">
								<button class="m-btn-p m-font-p" >
									<text style="position: relative;top: 10rpx;">即刻搜索</text>
									</button>
							</view>
						</view>
						
						<view v-else class="m-margin-bottom" style="margin-top: 12rpx;">
							<view class="" @tap="toQiekuaiList2">
								<button class="m-btn-p m-font-p" >
									<text style="position: relative;top: 10rpx;">即刻搜索</text>
									</button>
							</view>
						</view>
						
						
						
						<!--
						
						
						-->
					</view>
					<view class="m-container-3">
						<view class=" m-flex m-right">
							<view @tap="toOrder4"  class="m-flex-2 m-container-f m-margin-rgiht">
								<view class="">
									<image class="m-icon" src="../../../../static/myList.png" mode=""></image>
									
								</view>
								<view class="">
									<view  class="">
										<text class="m-font-list">我的清单</text>
									</view>
								</view>
							</view>
							<view @tap="toOrder" class="m-flex-2 m-container-f m-margin-rgiht">
								<view class="">
									<image class="m-icon" src="../../../../static/myOrder.png" mode=""></image>
								</view>
								<view class="" >
									<text class="m-font-list">我的订单</text>
								</view>
							</view>
							<view @tap="toNone3" class="m-flex-2 m-container-f m-margin-rgiht">
								<view class="">
									<image class="m-icon" src="../../../../static/service.png" mode=""></image>
								</view>
								<view   class="">
									<text class="m-font-list">金融服务</text>
								</view>
							</view>
							<view @tap="toNone3" class="m-flex-2 m-container-f m-margin-rgiht">
								<view class="">
									<image class="m-icon" src="../../../../static/center.png" mode=""></image>
								</view>
								<view class="">
									<text class="m-font-list">商机中心</text>
								</view>
							</view>
							<view @tap="Call" class="m-flex-2 m-container-f m-margin-rgiht">
								<view class="">
									<image class="m-icon" src="../../../../static/consult.png" mode=""></image>
								</view>
								<view  class="">
									<text class="m-font-list">咨询客服</text>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	import pickerAddress from '../../../../components/wangding-pickerAddress/wangding-pickerAddress.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components:{
			uniSegmentedControl,
			pickerAddress,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
			},
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				items: ['砌块','板材','辅材','配件','工具'],
				data1:['','常规砌块','保温砌块','隔音砌块','防震砌块','防裂砌块','防震防裂砌块'],
				data2:['','常规板材','保温板材','隔音板材','防震板材','防裂板材','防震防裂板材'],
				current: 0,
				InfoIndex:0,
				InfoIndex2:0,
				txt: '',
				value3:'您的收货地址',
				value4:'您的收货地址',
				date: '交货周期',
				dateA: '交货周期',
				value1:'',
				value2:'购买量',
				value2A:'购买量',
				temp:'',
				isActive:1,
			}
		},
		computed: {
				
		        startDate() {
					var d = new Date();
					console.log(d.getFullYear())
					console.log(d.getMonth())
					console.log(d.getDate())
					console.log(this.getDate('start'))
					
		            return d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate();
				
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
			mounted:function(){
					// this.data2[0] = "板材类型"
			},
		methods: {
			toBoard:function(){
				console.log("1111111")
				uni.navigateTo({
					url:"../board/QieKuaiList-2"
				})
			},
			Call:function(){
				uni.makePhoneCall({
				    phoneNumber: '0572-6308033' //仅为示例
				});
			},
			toNone3:function(){
				uni.navigateTo({
					url:'../none-3/none-3'
				})
			},
			toOrder:function(){
				uni.switchTab({
					url:'../order/order'
				})
			},
			toOrder4:function(){
				uni.navigateTo({
					url:'../order-4/order-4'
				})
			},
			onKeyInput:function(e){
				this.value2 = e.target.value+' m³';
				
			},
			onKeyInputA:function(e){
				this.value2A = e.target.value+' m³';
				
			},
			open(){
				console.log(this.value2)
			    this.$refs.popup.open()
			},
			bindPickerChangeInfo:function(e){
				
				this.InfoIndex = e.target.value
			},
			bindPickerChangeInfo2:function(e){
				console.log('picker发送选择改变，携带值为', e.target.value)
				console.log('picker发送选择改变，携带值为', e.target.value)
				if(e.target.value==0){
					this.data2[0] = "板材类型"
				}
				this.InfoIndex2 = e.target.value
			},
			onClickItem(e) {
			           if (this.current !== e.currentIndex) {
			               this.current = e.currentIndex;
			           }
			 },
			 toQiekuaiList:function(){
			 	uni.navigateTo({
			 		url:"../QieKuaiList/QieKuaiList"
			 	})
			 },
			 toQiekuaiList2:function(){
			 	uni.navigateTo({
			 		url:"../QieKuaiList-2/QieKuaiList-2"
			 	})
			 },
			 change(data) {
				 console.log(data)
			    this.value3 = data.data.join('')
			    console.log(data.data.join(''))
			  },
			  change2(data) {
			  	console.log(data)
			     this.value4 = data.data.join('')
			     console.log(data.data.join(''))
			   },
			  bindDateChange: function(e) {
			            this.date = e.target.value
			        },
			        bindTimeChange: function(e) {
			            this.time = e.target.value
			        },
			        getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        },
					bindDateChangeA: function(e) {
								console.log(e.target.value)
					          this.dateA = e.target.value
					      },

					close:function(temp){
						console.log(temp)
						console.log(this.temp)
						this.value2 == this.temp;
						    // 执行父组件的close事件，关闭弹出层
						    this.$refs.popup.close()
							console.log(this.value2)
					}
			   
		}
	}
</script>

<style lang="less">
@import url("../../../../style.less");
@import url("../../index.less");
</style>
